<template>
    <div class="security-and-privacy-page">
        <TopTitleExit title="User Security" :exit="routerExit"></TopTitleExit>
        <div class="body">
            <div class="warning-box">
                <div class="icon" :style="`--icon: url(/icon/warn_icon/tips.svg)`"></div>
                <div class="warn-text">Keep your account secure by regularly updating your passwords and verifying your email address.</div>
            </div>
            <div class="tabbar">
                <div class="item" v-for="item in tabbar" :key="item.id" @click="active_tabbar = item" :style="`border-bottom: 0.5vw solid ${ item.id == active_tabbar.id ? 'var(--active-color)' : '#00000000' }`">
                    <div class="text" :style="`color: ${ item.id == active_tabbar.id ? 'var(--active-color)' : 'var(--text-color)' }`">{{ item.text }}</div>
                </div>
            </div>
            <div class="login-password" v-show="active_tabbar.id == 1">
                <div class="input-line">
                    <div class="k">Enter your email to receive a reset code.</div>
                    <div class="v">
                        <input type="text" v-model="loginPasswordForm.email" placeholder="you@example.com" />
                        <!-- <div class="icon" :style="`--icon: url(${ loginPasswordForm.show_old_password ? '/icon/show/show.svg' : '/icon/show/noshow.svg' })`" @click="loginPasswordForm.show_old_password = !loginPasswordForm.show_old_password"></div> -->
                    </div>
                </div>
                <!-- <div class="input-line">
                    <div class="k">New Login Password</div>
                    <div class="v">
                        <input :type="`${ loginPasswordForm.show_new_password ? 'text' : 'password' }`" v-model="loginPasswordForm.new_password" placeholder="Enter new password" />
                        <div class="icon" :style="`--icon: url(${ loginPasswordForm.show_new_password ? '/icon/show/show.svg' : '/icon/show/noshow.svg' })`" @click="loginPasswordForm.show_new_password = !loginPasswordForm.show_new_password"></div>
                    </div>
                </div>
                <div class="input-line">
                    <div class="k">Confirm New Login Password</div>
                    <div class="v">
                        <input :type="`${ loginPasswordForm.show_confirm_password ? 'text' : 'password' }`" v-model="loginPasswordForm.confirm_password" placeholder="Confirm new password" />
                        <div class="icon" :style="`--icon: url(${ loginPasswordForm.show_confirm_password ? '/icon/show/show.svg' : '/icon/show/noshow.svg' })`" @click="loginPasswordForm.show_confirm_password = !loginPasswordForm.show_confirm_password"></div>
                    </div>
                </div> -->
                <div class="btn-box">
                    <div class="btn" @click="JumpToChangeLoginPasswordVerifyCode">Next</div>
                </div>
            </div>
            <div class="fund-password" v-show="active_tabbar.id == 2">
                <div class="input-line">
                    <div class="k">Enter your email to receive a reset code.</div>
                    <div class="v">
                        <input type="text" v-model="fundPasswordForm.email" placeholder="you@example.com" />
                        <!-- <div class="icon" :style="`--icon: url(${ fundPasswordForm.show_old_password ? '/icon/show/show.svg' : '/icon/show/noshow.svg' })`" @click="fundPasswordForm.show_old_password = !fundPasswordForm.show_old_password"></div> -->
                    </div>
                </div>
                <!-- <div class="input-line">
                    <div class="k">New Fund Password</div>
                    <div class="v">
                        <input :type="`${ fundPasswordForm.show_new_password ? 'text' : 'password' }`" v-model="fundPasswordForm.new_password" placeholder="Enter new fund password" />
                        <div class="icon" :style="`--icon: url(${ fundPasswordForm.show_new_password ? '/icon/show/show.svg' : '/icon/show/noshow.svg' })`" @click="fundPasswordForm.show_new_password = !fundPasswordForm.show_new_password"></div>
                    </div>
                </div>
                <div class="input-line">
                    <div class="k">Confirm New Fund Password</div>
                    <div class="v">
                        <input :type="`${ fundPasswordForm.show_confirm_password ? 'text' : 'password' }`" v-model="fundPasswordForm.confirm_password" placeholder="Confirm new fund password" />
                        <div class="icon" :style="`--icon: url(${ fundPasswordForm.show_confirm_password ? '/icon/show/show.svg' : '/icon/show/noshow.svg' })`" @click="fundPasswordForm.show_confirm_password = !fundPasswordForm.show_confirm_password"></div>
                    </div>
                </div> -->
                <div class="warn-box">
                    <div class="icon" :style="`--icon: url(/icon/warn_icon/warn.svg)`"></div>
                    <div class="text">Your fund password is used for withdrawal requests and financial transactions. Keep it secure and different from your login password.</div>
                </div>
                <div class="btn-box">
                    <div class="btn" @click="JumpToChangeFundPasswordVerifyCode">Next</div>
                </div>
            </div>
            <div class="email-address" v-show="active_tabbar.id == 3">
                <div class="input-line">
                    <div class="k">Original Email address</div>
                    <div class="v">
                        <input type="text" v-model="emailAddressForm.old_email" placeholder="Enter Email address" />
                    </div>
                </div>
                <!-- <div class="input-btn-line">
                    <div class="k">Original Email Verify Code</div>
                    <div class="v">
                        <div class="input-box">
                            <input type="text" v-model="emailAddressForm.old_email_verify_code" placeholder="Enter verify code of original email" />
                        </div>
                        <div class="btn">
                            <div class="text">send</div>
                        </div>
                    </div>
                </div>
                <div class="input-line">
                    <div class="k">New Email Address</div>
                    <div class="v">
                        <input type="text" v-model="emailAddressForm.new_password" placeholder="Enter new fund password" />
                    </div>
                </div>
                <div class="input-btn-line">
                    <div class="k">New Email Verify Code</div>
                    <div class="v">
                        <div class="input-box">
                            <input type="text" v-model="emailAddressForm.new_email_verify_code" placeholder="Enter verify code of new email" />
                        </div>
                        <div class="btn">
                            <div class="text">send</div>
                        </div>
                    </div>
                </div> -->
                <div class="warn-box">
                    <div class="icon" :style="`--icon: url(/icon/warn_icon/warn.svg)`"></div>
                    <div class="text">After updating your email, you will receive notifications and login verification codes at your new email address.</div>
                </div>
                <div class="btn-box">
                    <div class="btn" @click="JumpToChangeEmailVerifyCode_old">Next</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import TopTitleExit from '@/components/common/TopTitleExit.vue';
import { routerExit, routerTo } from '@/utils/jump';
import { ref, reactive } from 'vue';
import { checkEmail } from '@/utils/input';
import { toast } from '@/service/status';

const tabbar = [
    {
        id: 1,
        text: 'Login Password'
    },
    {
        id: 2,
        text: 'Fund Password'
    },
    {
        id: 3,
        text: 'Email Address'
    },
];

const active_tabbar = ref(tabbar[0]);

const loginPasswordForm = reactive({
    email: '',
    old_password: '',
    show_old_password: false,
    new_password: '',
    show_new_password: false,
    confirm_password: '',
    show_confirm_password: false,
});

const fundPasswordForm = reactive({
    email: '',
    old_password: '',
    show_old_password: false,
    new_password: '',
    show_new_password: false,
    confirm_password: '',
    show_confirm_password: false,
});

const emailAddressForm = reactive({
    old_email: '',
    old_email_verify_code: '',
    new_email: '',
    new_email_verify_code: '',
});

// 跳转到 修改登录密码 邮箱验证码页面
function JumpToChangeLoginPasswordVerifyCode() {
    let call = true;
    if (loginPasswordForm.email == '') {
        call = false;
        toast.toast('Please enter your email address', 2000);
    } else if (!checkEmail(loginPasswordForm.email)) {
        call = false;
        toast.toast('The email format is invalid', 2000);
    }
    if (call) {
        routerTo('/verify/login_password');
    }
}

// 跳转到 修改资金密码 邮箱验证码页面
function JumpToChangeFundPasswordVerifyCode() {
    let call = true;
    if (fundPasswordForm.email == '') {
        call = false;
        toast.toast('Please enter your email address', 2000);
    } else if (!checkEmail(fundPasswordForm.email)) {
        call = false;
        toast.toast('The email format is invalid', 2000);
    }
    if (call) {
        routerTo('/verify/fund_password');
    }
}

// 跳转到 修改绑定邮箱 老邮箱验证码页面
function JumpToChangeEmailVerifyCode_old() {
    let call = true;
    if (emailAddressForm.old_email == '') {
        call = false;
        toast.toast('Please enter your email address', 2000);
    } else if (!checkEmail(emailAddressForm.old_email)) {
        call = false;
        toast.toast('The email format is invalid', 2000);
    }
    if (call) {
        routerTo('/verify/verify_old_email');
    }
}

</script>

<style scoped lang="less">
.security-and-privacy-page {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    overflow: hidden;

    .body {
        flex: 1;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5vw;
        padding: 5vw;
        overflow-x: hidden;
        overflow-y: auto;

        .warning-box {
            box-sizing: border-box;
            width: 100%;
            padding: 5vw;
            background-color: var(--active-more-light-color);
            border-radius: 2vw;
            display: flex;
            gap: 2vw;

            .icon {
                --size: 5vw;
                --w: var(--size);
                --h: var(--size);
                font-size: calc(var(--size) * 0.8);
                text-align: center;
                line-height: var(--size);
                color: var(--active-color);
            }

            .warn-text {
                flex: 1;
                font-size: 3vw;
                color: var(--text-color);
            }
        }

        .tabbar {
            width: 100%;
            display: flex;
            border-bottom: 0.1vw solid var(--border-color);

            .item {
                padding: 4vw 0;
                flex: 1;

                .text {
                    text-align: center;
                    font-size: 3.5vw;
                    font-weight: 500;
                }
            }
        }

        .login-password, .fund-password, .email-address {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 4vw;

            .input-line {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 2.5vw;

                .k {
                    font-size: 3.2vw;
                    font-weight: 500;
                    color: var(--text-color);
                }

                .v {
                    box-sizing: border-box;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    gap: 2vw;
                    border: 0.1vw solid var(--border-color);
                    border-radius: 2vw;
                    padding: 2vw;

                    input {
                        flex: 1;
                        height: 4vw;
                        border: 0;
                        outline: 0;
                        font-size: 3vw;
                    }

                    .icon {
                        --size: 4vw;
                        --w: var(--size);
                        --h: var(--size);
                    }
                }
            }

            .input-btn-line {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 2.5vw;

                .k {
                    font-size: 3.2vw;
                    font-weight: 500;
                    color: var(--text-color);
                }

                .v {
                    display: flex;
                    gap: 2vw;

                    .input-box {
                        box-sizing: border-box;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        gap: 2vw;
                        border: 0.1vw solid var(--border-color);
                        border-radius: 2vw;
                        padding: 2vw;

                        input {
                            flex: 1;
                            height: 4vw;
                            border: 0;
                            outline: 0;
                            font-size: 3vw;
                        }
                    }

                    .btn {
                        box-sizing: border-box;
                        height: 100%;
                        padding: 1vw 2vw;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 2vw;
                        background-color: var(--active-color);

                        .text {
                            font-size: 3vw;
                            color: #fff;
                        }
                    }
                }
            }

            .warn-box {
                box-sizing: border-box;
                width: 100%;
                padding: 5vw;
                background-color: var(--warn-bg-color);
                border-radius: 2vw;
                display: flex;
                gap: 2vw;

                .icon {
                    --size: 5vw;
                    --w: var(--size);
                    --h: var(--size);
                    font-size: calc(var(--size) * 0.8);
                    text-align: center;
                    line-height: var(--size);
                    color: var(--active-color);
                }

                .text {
                    flex: 1;
                    font-size: 3vw;
                    color: var(--text-color);
                }
            }

            .btn-box {
                margin-top: 10vw;
                width: 100%;

                .btn {
                    --h: 11vw;
                    width: 100%;
                    height: var(--h);
                    border-radius: 2vw;
                    background-color: var(--active-color);
                    color: #fff;
                    font-size: 3.5vw;
                    font-weight: 500;
                    text-align: center;
                    line-height: var(--h);
                }
            }
        }
    }
}
</style>